<style type="text/css">
.sku-group-title {
    position: relative;
    padding: 7px 0 7px 10px;
    margin: 0;
    color: #666;
    background-color: #f8f8f8;
    font-weight: normal;
}

.popover {
    max-width: 1200px
}

.sku-group-title .s_right {
    margin-right: 15px;
    display: none;
    font-size: 20px;
    margin-top: 3px;
}

.sku-group-title:hover .s_right {
    display: block;
}

.sku-group .sku-group-cont {
    padding: 10px;
    margin-bottom: 10px;
}

.sku-atom-list {
    display: inline-block;
}

.sku-atom.active {
    margin-bottom: 100px;
}

.sku-atom {
    border: 1px solid #AAA;
    padding: 4px;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 88px;
    vertical-align: middle;
    text-align: center;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
}

.sku-atom span {
    display: block;
    width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.close-modal.small {
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 16px;
    border-radius: 9px;
}

.close-modal {
    position: absolute;
    z-index: 2;
    top: -9px;
    right: -9px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 18px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: rgba(153, 153, 153, 0.6);
    border-radius: 10px;
}

.sku-atom .upload-img-wrap {
    position: absolute;
    top: 36px;
    left: 0;
    padding: 2px;
    width: 88px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
}

.sku-atom .upload-img-wrap .cBtn {
    display: none;
}

.sku-atom .upload-img-wrap:hover .cBtn {
    display: block;
}

.sku-atom .upload-img-wrap .arrow {
    position: absolute;
    width: 0;
    height: 0;
    top: -9px;
    left: 44%;
    border-style: solid;
    border-color: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000000;
}

.sku-atom .upload-img-wrap .arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: -10px;
    margin-left: -10px;
    border-bottom-color: #fff;
    border-top-width: 0;
    border-width: 10px;
    content: "";
}

.select2-drop-active {
    border: none;
}

.close-modal:hover {
    color: #fff;
    background: #000000
}

.select2-search:after {
    content: ''
}

.select2-selection--multiple {
    border: 1px solid #d5d5d5 !important;
}

.popover {}

.select2-container {
    z-index: 99999
}

.sku-sub-group {
    margin-bottom: 10px
}

.sku-sub-group .sku-group-title {
    margin-bottom: 10px
}

.js-add-sku-atom {
    display: none;
}

table.table-sku-stock {
    width: 100%;
    background-color: #fff;
    text-align: left
}

table.table-sku-stock th {
    padding: 10px 8px;
    font-weight: normal
}

table.table-sku-stock th.th-price {
    width: 100px
}

table.table-sku-stock th.th-stock {
    width: 75px
}

table.table-sku-stock th.th-code {
    width: 90px
}

table.table-sku-stock td {
    border: 1px solid #e5e5e5;
    padding: 8px
}

table.table-sku-stock td:first-of-type {
    border-left: none
}

table.table-sku-stock td:last-of-type {
    border-right: none
}

.sku-stock {
    border: 1px solid #e5e5e5;
}

.input-mini {
    padding: 0px
}
</style>
<link rel="stylesheet" href="__AdminJs__/select2/css/select2.css" />
<script src="__AdminJs__/select2/js/select2.full.min.js"></script>
<php>res_load(PUBLIC_PATH."/BoxAddon/Upload/_static/css/default.css","css")</php>
<php>res_load(PUBLIC_PATH."/Js/plug/photo.js","js")</php>
<div class="page-content">
    <ul class="breadcrumb" style="margin:0px">
        <li><a href="<{:U('Goods/index')}>">商品管理</a> </li>
        <li>添加</li>
    </ul>
    <form enctype="multipart/form-data" class="form-horizontal mgt10" action="<{:U('add')}>" method="post" id="myform">
        <div class="panel panel-default">
            <div class="panel-heading">
                基本信息
            </div>
            <div class="panel-body">
                <input type="hidden" name="id" value="<{$data.id}>">
                <div class="form-group">
                    <label for="input-title" class="col-sm-2 control-label">名称</label>
                    <div class="col-sm-10">
                        <input type="text" style="width:680px" class="form-control" name="goods_name" value="<{$data.goods_name}>">
                    </div>
                </div>
                <div class="form-group">
                    <label for="input-title" class="col-sm-2 control-label">商品分类</label>
                    <div class="col-sm-10">
                        <input type="text" style="width:680px" class="form-control" name="goods_name" value="<{$data.goods_name}>">
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                库存/规格
            </div>
            <div class="panel-body">
                <input type="hidden" name="id" value="<{$data.id}>">
                <div class="form-group">
                    <label for="input-title" class="col-sm-2 control-label">商品规格</label>
                    <div class="col-sm-10">
                        <div id="sku-container"></div>
                        <h3 class="sku-group-title"> <button type="button" class="js-add-sku-group btn btn-xs">添加规格项目</button></h3>
                    </div>
                </div>
                <div class="form-group form-group-stock-region">
                    <label for="input-title" class="col-sm-2 control-label">商品库存</label>
                    <div class="col-sm-10">
                        <div id="stock-region" class="controls sku-stock">
                            <table class="table-sku-stock">
                                <thead>
                                    <tr>
                                        <th class="th-price">价格（元）</th>
                                        <th class="th-stock">库存</th>
                                        <th class="th-code">商家编码</th>
                                        <th class="text-right">销量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="7">
                                            <div class="batch-opts">
                                                批量设置：
                                                <span class="js-batch-type">
 <a class="js-batch-price" href="javascript:;">价格</a> &nbsp;&nbsp; <a class="js-batch-stock" href="javascript:;">库存</a> </span>
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-7" align="center">
                <button class="btn btn-primary" type="submit">确认保存</button>
            </div>
        </div>
    </form>
</div>
<div id="ui-popover-inner" style="display:none">
    <div class="form-group" style="width:600px;margin-bottom:0px">
        <div class="col-sm-9">
            <select class="js-example-tags form-control" id='add-sku-input' multiple="multiple">
                <option>orange</option>
                <option>white</option>
                <option>purple</option>
            </select>
        </div>
        <div class="col-sm-3" style="margin-top:5px">
            <button class="btn btn-xs js-save">确定</button>
            <button class="btn  btn-xs js-cancel">取消</button>
        </div>
    </div>
</div>
<div class="none" id="sku-sub-group-image">
    <div class="upload-img-wrap ">
        <div class="arrow"></div>
        <div class="js-upload-container" style="position:relative;">
            <div data-type="upload"></div>
        </div>
    </div>
</div>
<!--添加规格-->
<script type="text/html" id="sku-group-html">
    <div class="sku-sub-group">
        <div class="sku-group-title">
            <div class="s_left">
                <div class="select2-container" style="width: 180px;">
                    <select class="js-example-tags form-control" id='s2id_autogen3'>
                        <option>请选择</option>
                        <option>orange</option>
                        <option>white</option>
                        <option>purple</option>
                    </select>
                </div>
                <label for="js-addImg-function" class="addImg-radio mgl20">
                    <input type="checkbox" onclick="skuAddImg(this)" id="js-addImg-function"> 添加规格图片</label>
            </div>
            <div onclick="remove_group(this,'.sku-sub-group')" class="s_right glyphicon glyphicon-remove-circle"></div>
            <div class="clear"></div>
        </div>
        <div class="js-sku-atom-container sku-group-cont">
            <div>
                <div class="js-sku-atom-list sku-atom-list">
                </div>
                <a href="javascript:;" class="js-add-sku-atom add-sku">+添加</a>
            </div>
        </div>
        <div class="sku-group-cont" id="js-tip-instruction" style="padding: 0px 10px; display: none;">
            <p class="help-desc">目前只支持为第一个规格设置不同的规格图片</p>
            <p class="help-desc">设置后，用户选择不同规格会显示不同图片</p>
            <p class="help-desc">建议尺寸：640 x 640像素</p>
        </div>
    </div>
</script>
<script>
var len = 1;
$(function() {
    $(".form-horizontal").bootstrapValidator({
        message: '您填入的值不合法',
        fields: {
            title: {
                message: '商品名称',
                validators: {
                    notEmpty: {
                        message: '商品名称不能为空'
                    },
                }
            },
            xuebazi: {
                message: '学分',
                validators: {
                    notEmpty: {
                        message: '学分不能为空'
                    },
                    greaterThan: {
                        value: 0,
                        message: '学分不能小于0'
                    },
                }
            },

        }
    });


    //添加规格
    $(".js-add-sku-group").click(function() {
        add_sku();
        hide_add_sku();
    })

});

function hide_add_sku() {
    var length = $("#sku-container").find(".sku-sub-group").length;
    if (length == 3) {
        $(".js-add-sku-group").parent().hide();
    } else {
        $(".js-add-sku-group").parent().show();
    }

}
//添加规格
function add_sku() {
    var length = $("#sku-container").find(".sku-sub-group").length;
    var html = $("#sku-group-html").html();
    $("#sku-container").append(html);
    var sku = $("#sku-container").find(".sku-sub-group:last");
    $eventSelect = $(sku).find("#s2id_autogen3");
    $eventSelect.select2({
        placeholder: '请选择',
        allowClear: false,
        tags: true,
    });

    //绑定子添加
    bind_add_sub_sku(sku);
    //隐藏规格图片
    if (length > 0) {
        sku.find("#js-addImg-function").parent().hide();
    }

    //选中回调
    $eventSelect.on("select2:select", function(e) {
        //alert(1);
        if (check_select(sku)) {
            var data = $(this).select2("data")[0];
            if (data.text != "请选择") {
                sku.find(".js-add-sku-atom").css("display", "inline-block");
            } else {
                sku.find(".js-add-sku-atom").css("display", "none");
                sku.find(".sku-atom-list").html("");
                show_table();
            }
        } else {
            hiApp.alert("规格名不能相同");
            $(this).select2("open");
            $(this).val("请选择").trigger("change");;
        }

    });
    /*****/
}

function bind_add_sub_sku(sku) {
    var _this = sku.find(".js-add-sku-atom")
    $(_this).unbind("click");
    $(_this).click(function() {
        var obj = $(this);
        //alert(1);
        var content = $('#ui-popover-inner').html();
        var options = {
            'content': content,
            'placement': 'bottom',
            'trigger': 'click',
            'html': true,
            'title': "",
        };

        obj.popover(options);
        obj.popover("show");
        event.stopPropagation();
        $("body").find(".popover").bind(hiApp.device.click, function(event) {
            event.stopPropagation();
        });

        $("body").click(function() {
            obj.popover("hide");
            obj.popover("destroy");
        });

        $(".js-cancel").click(function() {
            obj.popover("hide");
        });
        $(".sku-sub-group .select2-container").css("z-index", "99");
        $eventSelect2 = sku.find("#add-sku-input");
        //实例化下拉
        $eventSelect2.select2({
            //  data: sub_data,
            placeholder: '请选择',
            multiple: true,
            allowClear: true,
            //maximumSelectionLength:10,
            tags: true,
            tokenSeparators: [',', ' '],
        });

        //选中的值
        $(".js-save").unbind("click");
        $(".js-save").click(function() {
            var data = $("#add-sku-input").select2("data");
            //已经选中的
            var data2 = new Array();
            var sku_atom = sku.find(".sku-atom-list .sku-atom");
            if (sku_atom.length > 0) {
                $.each(sku_atom, function(i, v) {
                    var text = $(v).find("span").text();
                    data2.push(text);
                })
            }

            //添加
            var html = '<div class="sku-atom">';
            html += '<span>{{item}}</span>';
            html += '<div onclick="remove_group(this,\'.sku-atom\')" class="atom-close close-modal small js-remove-sku-atom">×</div>';
            html += '</div>';
            var bool = 1;
            $.each(data, function(i, v) {
                if ($.inArray(v.text, data2) == -1) {
                	html=html.replace("{{item}}",v.text);
                    sku.find(".sku-atom-list").append(html);
                } else {
                    bool = bool * 0;
                }
            })
            if (bool == 0) {
                hiApp.alert("您已添加相同规格值");
            }
            skuAddImg(this)
            obj.popover("hide");
            show_table();

        });

    })
}
//设置规格图片
function skuAddImg(_this) {
    var bool = $(_this).parents(".sku-sub-group").find("#js-addImg-function").prop("checked");
    var suk = $(_this).parents(".sku-sub-group");
    var sukList = suk.find(".sku-atom");
    $.each(sukList, function(i, v) {
        if (bool) {
            if ($(v).find(".upload-img-wrap").length == 0) {
                var html = $("#sku-sub-group-image").html();
                $(v).append(html);
                hiApp.upload($(v).find("[data-type='upload']"))
                $(v).addClass("active");
            }
        } else {
            $(v).find(".upload-img-wrap").remove();
            $(v).removeClass("active");
        }
    })
    if (bool) {
        suk.find("#js-tip-instruction").show();
    }
}
//选中的规格是否有重复
function check_select(_this) {
    var select = $(_this).siblings(".sku-sub-group").find("#s2id_autogen3");
    var select_cur = $(_this).find("#s2id_autogen3");
    if (select.length == 0) {
        return true;
    }
    var bool = 1;
    var cur_text = $(select_cur).select2("data")[0]['text'];
    $.each(select, function(i, v) {
        var text = $(v).select2("data")[0]['text'];
        if (text == cur_text) {
            bool = bool * 0;
        }
    })
    return bool;
}


function remove_group(_this, _name) {
    $(_this).parents(_name).remove();
    hide_add_sku();
    show_table();
}

//显示列表
function show_table() {
    var group = $("#sku-container .sku-sub-group");
    var suk = {}; //有规格值的规格
    var _length = group.length;
    var i = 0;
    if (_length > 0) {
        $.each(group, function(i, v) {
            if ($(v).find(".sku-atom-list .sku-atom").length == 0) {
                _length--;
            } else {
                suk[i] = $(v);
                i++;
            }
        });
    }
    //如果没有规格不显示
    if (_length == 0) {
        $("#stock-region .table-sku-stock tbody").html("");
        $(".form-group-stock-region").hide();
        return false;
    } else {
        $(".form-group-stock-region").show();
    }
    //头部
    var headhtml = "";
    $("#stock-region .table-sku-stock thead .prepend").remove();
    $.each(suk, function(i, v) {
        var text = $(v).find("#s2id_autogen3").val();
        headhtml += '<th class="text-center prepend">' + text + '</th>';
    });
    $("#stock-region .table-sku-stock thead tr").prepend(headhtml);
    //body
    var html = "";
    var sku_1 = $(suk[0]).find(".sku-atom-list .sku-atom").length ? suk[0].find(".sku-atom-list .sku-atom").length : 1; //第一个规格
    var sku_2 = $(suk[1]).find(".sku-atom-list .sku-atom").length ? $(suk[1]).find(".sku-atom-list .sku-atom").length : 1;
    var sku_3 = $(suk[2]).find(".sku-atom-list .sku-atom").length ? $(suk[2]).find(".sku-atom-list .sku-atom").length : 1;
    var i = 0;
    var j = 0;
    var k = 0;
    var top_1 = 1;
    var top_2 = 1;
    var top_3 = 1;
    //alert(_length);
    for (i = 0; i < sku_1; i++) {
        top_1 = sku_2 * sku_3;
        for (j = 0; j < sku_2; j++) {
            top_2 = sku_3;
            for (k = 0; k < sku_3; k++) {
                top_3 = 1;
                html += '<tr>';
                if (top_1 > 0 && _length > 0) {
                    var text = suk[0].find(".sku-atom-list .sku-atom").eq(i).find("span").text();
                    html += '<td  rowspan="' + top_1 + '">' + text + '</td>';
                    top_1 = 0;
                }
                if (top_2 > 0 && _length > 1) {
                    var text = suk[1].find(".sku-atom-list .sku-atom").eq(j).find("span").text();
                    html += '<td  rowspan="' + top_2 + '">' + text + '</td>';
                    top_2 = 0;
                }
                if (top_3 > 0 && _length > 2) {
                    var text = suk[2].find(".sku-atom-list .sku-atom").eq(k).find("span").text();
                    html += '<td rowspan="' + top_3 + '">' + text + '</td>';
                }
                html += '<td><input type="text" name="sku_price" class="js-price input-mini" value="" maxlength="10"></td>';
                html += '<td><input type="text" name="stock_num" class="js-stock-num input-mini" value="" maxlength="9"></td>';
                html += '<td><input type="text" name="code" class="js-code input-small" value=""></td>';
                html += '<td class="text-right">0</td>';
                html += '</tr>';
            }
        }
    }
    $("#stock-region .table-sku-stock tbody").html(html);
}
show_table();
</script>
